<template>
	<view class="nav-bar">
		<view class="nav-back">
			<button class="back-btn" @tap="goBack"></button>
		</view>
		<view class="nav-bar-title">{{ title }}</view>
	</view>

</template>

<script>
	export default {
		props: {
			title: {
				type: String,
				default: '导航栏标题'
			}
		},
		methods: {
			goBack() {
				this.$emit('back')
			}
		}
	}
</script>

<style scoped>
	.nav-bar {
		display: flex;
		height: 44px;
		width: 100%;
		align-items: center;
		line-height: 44px;
		margin-top: 20px;
		/* padding: 10px 0; */
	}

	.nav-back {
		/* width: 20px;
		height: 30px; */
		/* padding: 10px; */
		margin-left: 5px;

	}

	.back-btn {
		width: 11px;
		height: 19px;
		background-image: url("https://wx.xtwaixie.com/img/back1.png");
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		border: 0;
		margin-left: 5.5px;
		align-items: center;
	}

	.nav-bar-title {
		height: 20px;
		width: 100px;
		line-height: 20px;
		margin-left: 126px;
		font-size: 13px;
		/* text-align: center; */
		/* justify-content: center; */
	}
</style>